<template>
	<div class="app">
		<h2>我是App组件</h2>
		<h4>我的子组件Child给我的msg是：{{msg}}</h4>

		<!-- 第一种绑定自定义事件的方式，直接在标签里写：@事件名="回调名" -->
		<!-- <Child @haha="test"/> -->

		<!-- 第二种绑定自定义事件的方式，给子组件打一个ref标识，随后通过标识去获取子组件，随后绑事件 -->
		<Child ref="haizi"/>

	</div>
</template>

<script>
	import Child from './components/Child'

	export default {
		name:'App',
		components:{Child},
		data() {
			return {
				msg:''
			}
		},
		methods: {
			test(value){
				console.log('App里的test函数被调用了',value)
				this.msg = value
			}
		},
		mounted() {
			setTimeout(()=>{
				this.$refs.haizi.$on('haha',this.test)
			},5000)
		},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 30px;
	}
</style>